class Food
{
    constructor(el)
    {
        this.el = el
        this.length = 20
        this.foodObj = null
        this.foodX = 0
        this.foodY = 0
    }

    create()
    {
        //创造一个食物的标签
        let divObj = document.createElement('div')
        //设置food的样式
        divObj.style.width = this.length + 'px'
        divObj.style.height = this.length + 'px'
        divObj.style.background = 'green'
        divObj.style.position = 'absolute'
        //单独保存divObj
        this.foodObj = divObj
        //追加在页面中
        this.el.appendChild(divObj)
        //调用 食物移动 方法
        this.foodMove()
    }

    foodMove()
    {
        //设置最大坐标
        let foodMaxX = this.el.clientWidth/this.length - 1
        let foodMaxY = this.el.clientHeight/this.length - 1
        //随机出现食物
        this.foodX = Math.floor(Math.random() * (foodMaxX - 0 + 1)) * this.length
        this.foodY = Math.floor(Math.random() * (foodMaxY - 0 + 1)) * this.length
        
        this.foodObj.style.left = this.foodX + 'px'
        this.foodObj.style.top = this.foodY + 'px'
    }
}